<template>
  <div :id="id" :style="{ height:height,width:width}" class="chart"></div>
</template>

<script>
export default {
  props: {
    id: {
      type: String,
      default: 'clothesSell'
    },
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "300px"
    },
    dataX: {
      type: Array,
      default: () => ['2017.4', '2018.1',	'2018.2',	'2018.3',	'2018.4',	'2019.1',	'2019.2',	'2019.3',	'2019.4',	'2020.1','2020.2']
    },
    dataY1: {
      type: Array,
      default: () => [99,102.3,99.1,97.7,99.2,101.7,99.5,97.2,98,0,0]
    },
    dataY2: {
      type: Array,
      default: () => [0,0.4,-0.9,0.6,-1.7,1.7,0.5,-0.9,-0.5,0,0]
    },
    dataY3: {
      type: Array,
      default: () => [14.6,0.2,7,14.3,3.9,1.9,5.6,16.7,18.4,0,0]
    },
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.initChart();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      let echarts = require('echarts');
      this.chart = echarts.init(document.getElementById(this.id));
      const option = {
        tooltip:{
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: {
          data: ['服装产销率累计值','服装产销率比去年同期增减','服装期末库存比年初增减'],
          textStyle:{
            fontSize: 14,
            color: 'white'
          }
        },
        // color: ['white','blue','black'],
        toolbox: {
          show: true,
          x:0,
          y:0,
          // right:0,
          // top:0,
          feature: {
            magicType: {type: ['line','bar']}
          }
        },
        grid: {
          right: 0,
          bottom: 0,
          left: 0,
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.dataX,
            axisLabel: {
              interval: 0,
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '百分比',
            interval: 20,
            axisLabel: {
              formatter: '{value} %'
            }
          }
        ],
        series: [
          {
            name: '服装产销率累计值',
            type: 'bar',
            data: this.dataY1
          },
          {
            name: '服装产销率比去年同期增减',
            type: 'bar',
            data: this.dataY2
          },
          {
            name: '服装期末库存比年初增减',
            type: 'bar',
            data: this.dataY3
          }
        ]
      };
      this.chart.setOption(option);
    }
  }
}
</script>

<style scoped>
.chart {
  /*padding-left: 2rem;*/
}
</style>
